<template>
  <div>
    <van-nav-bar
      title="登录"
      :border="false"
      right-text="注册"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />

    <div class="reg">
      <h1>欢迎登录</h1>
      <form action>
        <van-cell-group>
          <van-field
            v-model="userinfo.username"
            label="用户名"
            placeholder="请输入用户名"
            :error-message="user_err"
            left-icon="contact"
          />
          <van-field
            v-model="userinfo.password"
            type="password"
            label="密码"
            placeholder="请输入密码"
            :error-message="pwd_err"
            left-icon="closed-eye"
            autocomplete="‘new-password’"
          />
        </van-cell-group>
      </form>
      <van-button color="red" size="large" @touchstart="reg">登录</van-button>
    </div>
  </div>
</template>

<script>
// 引入提示组件
import { Toast, ContactList } from "vant";
export default {
  data() {
    return {
      userinfo: {
        username: "",
        password: ""
      },
      user_err: "",
      pwd_err: ""
    };
  },
  methods: {
    onClickLeft() {
      this.$router.push("/my");
    },
    onClickRight() {
      this.$router.push("/register");
    },
    reg() {
      let username = this.userinfo.username;
      let pwd = this.userinfo.password;
      if (username.length < 3 || username.length > 10) {
        this.user_err = "用户名要求3-10个字符";
        return false;
      }
      if (pwd.length < 8) {
        this.pwd_err = "密码长度必须大于8位";
      }
      this.user_err = this.pwd_err = "";
      this.axios.post(
          "http://www.shop.com:8080/api.php/common/getUserlogin?access_token=5b7f60aca7e7f6f8c680b1b219ad3ec6&&username=" +
            username +
            "&&password=" +
            pwd
        ).then(res => {
          if (res.data.status == 1) {
            Toast({
              message: "登录成功",
              icon: "success"
            });
            // 记录用户ID
            sessionStorage.setItem("username", res.data.data.username);
            sessionStorage.setItem("password", res.data.data.password);
            sessionStorage.setItem("u_img",res.data.data.u_img);
            // 登录成功跳转到首页
            this.$router.push("/index")
          } else {
            Toast({
              message: res.data.msg,
              icon: "fail"
            });
          }
        });
    }
  }
};
</script>

<style scoped>
.van-nav-bar .van-icon,
.van-nav-bar__title,
.van-nav-bar__text {
  color: #000;
}
.reg {
  width: 300px;
  margin: 50px auto;
}
.reg h1 {
  font-family: "华文新魏";
  color: brown;
}
</style>
